<template>
  <el-card class="box-card">
    <el-form
      :inline="true"
      ref="form"
      :model="listParams"
      @submit.prevent="handleQuery"
      :disabled="listLoading"
    >
      <el-form-item label="状态">
        <el-select v-model="listParams.status" placeholder="请选择">
          <el-option label="全部" value="" />
          <el-option label="显示" :value="1" />
          <el-option label="不显示" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="管理员名称">
        <el-input v-model="listParams.name" placeholder="请输入身份昵称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit"> 查询 </el-button>
        <el-button type="success" @click="formVisible = true"> 添加管理员 </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border style="width: 100%" v-loading="listLoading">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="real_name" label="姓名" />
      <el-table-column prop="account" label="账号" />
      <el-table-column prop="roles" label="身份" min-width="180">
        <template #default="scope">
          <el-space wrap>
            <el-tag
              class="role-tag"
              v-for="item in scope.row.roles.split(',')"
              :key="item"
            >
              {{ item }}
            </el-tag>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column label="最后一次登录时间" prop="last_time" />
      <el-table-column label="最后一次登录IP" prop="last_ip" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.statusLoading"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="100" align="center">
        <template #default="scope">
          <el-button type="text" @click="handleUpdate(scope.row.id)"> 编辑 </el-button>
          <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <AppPagination
      v-model:page="listParams.page"
      v-model:limit="listParams.limit"
      :list-count="listCount"
      :load-list="loadList"
      :disabled="listLoading"
    />

    <addOrEditAdmin
      v-model="formVisible"
      v-model:admin-id="adminId"
      @success="handleFormSuccess"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import type { IListParams, Admin } from "@/api/types/admin";
import { getAdmins, deleteAdmin, updateAdminStatus } from "@/api/admin";
import { ElMessage } from "element-plus";
import addOrEditAdmin from "./addOrEditAdmin.vue";

const listLoading = ref(false);
const listParams = reactive({
  // 列表数据查询参数
  page: 1, // 当前页码
  limit: 10, // 每页大小
  name: "",
  roles: "",
  status: "" as IListParams["status"],
});
const list = ref<Admin[]>([]); // 列表数据
const listCount = ref(0); // 总条数
const adminId = ref<number | null>(null); // 管理员ID
const formVisible = ref(false); // 是否显示添加/修改管理员

onMounted(() => {
  loadList();
});
// 查询列表
const loadList = async () => {
  listLoading.value = true;
  const data = await getAdmins(listParams).finally(() => {
    listLoading.value = false;
  });
  data.list.forEach((item) => {
    item.statusLoading = false; // 控制切换状态的 loading 效果
  });
  list.value = data.list;
  listCount.value = data.count;
};
// 点击查询按钮
const handleQuery = async () => {
  listParams.page = 1; // 查询默认从第1页开始
  loadList();
};
// 修改状态
const handleStatusChange = async (item: Admin) => {
  item.statusLoading = true;
  await updateAdminStatus(item.id, item.status).finally(() => {
    item.statusLoading = false;
  });
  ElMessage.success(`${item.status === 1 ? "启用" : "禁用"}成功`);
};
// 删除
const handleDelete = async (id: number) => {
  await deleteAdmin(id);
  ElMessage.success("删除成功");
  loadList();
};
// 编辑
const handleUpdate = (id: number) => {
  adminId.value = id;
  formVisible.value = true;
};

const handleFormSuccess = () => {
  formVisible.value = false;
  loadList();
};
</script>

<style lang="scss" scoped></style>
